<template>
	<view>
		<selectYearMonth v-model="formData.sendMonth" @tabChange="handleTabChange"></selectYearMonth>
		<view class="card">
			<view class="biaoti1" ><text>收入：</text></view>
			<view class="biaoti4"><text>￥{{income}}元</text></view>
		</view>
		<view class="card">
			<view class="biaoti1"><text>支出：</text></view>
			<view class="biaoti4"><text>￥{{expense}}元</text></view>
		</view>
	</view>
</template>

<script>
	import selectYearMonth from '@/components/selectYearMonth.vue'; 
	export default {
		components: {
			selectYearMonth
		},
		data() {
			return {
				 formData: {
					 userId:"",
					 year:"",
					 month:""
				 } ,
				 sum:"",
				 income: 0,
				 expense: 0,
				 token:""
			}
		},
		onLoad() {
			uni.getStorage({
				key:'token',
				success: res=>{
					// console.log(res.data);
					this.token=res.data;
					uni.getStorage({
						key : 'user',
						success: res=>{
							console.log(res.data.userId);
							this.formData.userId=res.data.userId;
							this.select(new Date());
						}
					});
				}
			})
		},
		methods: {
			handleTabChange(s){
				this.select(s); // 当子组件传值变化时调用select方法
			},
			select(s){
				 var dateObj = new Date(s);
				this.formData.year = dateObj.getFullYear();
				this.formData.month = dateObj.getMonth() + 1;
				// console.log(this.formData.year,this.formData.month);
				uni.request({
					url:'http://8.130.170.106:9999/income/sum',
					data:{
						userId:this.formData.userId,
						year:this.formData.year,
						month:this.formData.month
					},
					header:{
						token:this.token
					},
					success: (res) => {
						this.income=res.data,
						console.log(this.income);
					}
				}),
				uni.request({
					url:'http://8.130.170.106:9999/expense/sum',
					data:{
						userId:this.formData.userId,
						year:this.formData.year,
						month:this.formData.month
					},
					header:{
						token:this.token
					},
					success: (res) => {
						this.expense=res.data
						console.log(this.expense);
					}
				})
				
			}
		}
	}
</script>
<style lang="scss">
	.card {
		// margin-top: 30px;
		height: 200upx;
		background-color: #F8F8F8;
		border: #000000 1px solid;
	
	}
	
	.biaoti1 {
		font-size: 40upx;
		margin-top: 5px;
	}
		
	.biaoti4 {
		width: 100%;
		font-size: 40upx;
		margin-top: 5px;
		text-align: center;
		color: #000000;
	}
</style>
